<!-- 商品列表 -->
<template>
  <div class="goods-list">
    <!-- tabbbar -->
   
    <ul class="tabbar-container">
      <li class="item" 
      v-for="(item,index) in tabbarList" 
      :key="item.name"
      @click="changeTabbar(index)"
      >
        <div :class="current === index?'red':''"> {{item.name}}</div>
        <div class="arrow-container" v-if="index === 1">
          <van-icon name="arrow-up"  size="8"  :color="status==='up'?'#f00':''"/>
          <van-icon name="arrow-down" size="8" :color="status==='down'?'#f00':''" />
        </div>
      </li>
    </ul>
   
    <!-- 商品列表 -->
    <ul class="goods-list-container">
        <li class="item" v-for="item in goodsList" :key="item.id">
            <img class="img" :src="item.list_pic_url" alt="">
            <div class="goods-name">{{item.name}}</div>
            <div class="price"> {{item.retail_price}} </div>
        </li>
    </ul>
  </div>
</template>

<script>
import {
    goodsList as goodsListApi
} from '@/api/home/goodsList'
export default {
    name:'GoodsList',
  data () {
    return {
        current:0,// 当前选中的下标
        status:'default',// 箭头状态 default up down
        isHot:'',
        isNew:'',
        order:'',// asc 价格从小到展示 desc 价格从大到小展示
        goodsList:[],
        tabbarList:[
          {
            name:'综合'
          },
          {
            name:'价格'
          },
          {
            name:'分类'
          }
        ]
    }
  },

  components: {},

  computed: {},

  created() {
    // console.log('this.$route.query=>',this.$route.query);
    if(this.$route.query.flag==="0"){ // 新品首发
        this.isNew = "1"
    }else{
        // 人气推荐
        this.isHot= "1"
    }

    this.getGoodsList()
    
  },

  mounted() {},

  methods: {
    async getGoodsList(){
        let res = await goodsListApi({
            isHot:this.isHot,
            isNew:this.isNew,
            order:this.order
        })
        this.goodsList = res.data
    },
    changeTabbar(index){
      this.current = index
      // 如果点击的是价格 修改箭头的状态
      if(index === 1){ // 价格
        // 先判断当前箭头的状态
        if(this.status === 'default' || this.status === 'down'){
           this.status = 'up'
           this.order = 'asc'
        }else if(this.status === 'up'){
           this.status = 'down'
           this.order = 'desc'
        }
      }else{
        this.status = "default"
        this.order=''
      }

      // 获取商品列表
      this.getGoodsList()
    }
  }
}

</script>
<style lang='scss' scoped>
.goods-list{
  background-color: #f4f4f4;
  // tabbar
  .tabbar-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    height: 50px;
    background-color: #fff;
    .item{
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 16px;
      .red{
        color: red;
      }
      .arrow-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -6px;
        ::v-deep .van-icon-arrow-down:before {
            position: absolute;
            top: -6px;
            left: -6px;
          }
      }
    }
  }
  &-container{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .item{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;
      width: 49%;
      height: 225px;
      background-color: #fff;
      .img{
        width: 150px;
        height: 150px;
      }
      .goods-name,.price{
        font-size: 12px;
        text-align: center;
      }
      .price{
        margin: 15px 0;
        color: red;
        font-size: 16px;
      }
    }
  }

 
}
</style>